<template>
  <div class="box">
    <div style="grid-area: c1"><mtrz></mtrz></div>
    <div style="grid-area: c2"><mtfk /></div>
    <!-- <div style="grid-area: c3"><mtdd /></div>
    <div style="grid-area: c4"><mtpri /></div> -->
    <div style="grid-area: c5"><yhzc /></div>
    <div style="grid-area: c6"><yhzcfb /></div>
    <!-- <div style="grid-area: c7"><datatotal /></div> -->
    <div class="xddd" style="grid-area: c8"><xdd /></div>
    <div style="grid-area: c9"><userpri /></div>
  </div>
</template>

<script setup lang="ts">
import mtrz from "@/components/view/mzrz.vue";
import mtfk from "@/components/view/mzfk.vue";
import mtdd from "@/components/view/mzdd.vue";
import mtpri from "@/components/view/mzpri.vue";
import yhzc from "@/components/view/yhzc.vue";
import yhzcfb from "@/components/view/yhzcfb.vue";
import datatotal from "@/components/view/datatotal.vue";
import xdd from "@/components/view/xdd.vue";
import userpri from "@/components/view/userpri.vue";
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;

  grid-template-areas:
    "c1 c2 c2 c6"
    "c5 c5 c5 c6"
    "c5 c5 c5 c6"
    "c8 c8 c8 c9"
    "c8 c8 c8 c9";
  > div {
    height: 100%;
    width: 100%;
    background-color: #252931;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #4c4d4f;
  }
}
</style>
